<template>
  <div class="special-container">
    <!--搜索-->
    <div class="search-box">
      <van-search v-model="searchVal" placeholder="请输入搜索关键字" disabled @click="$router.push('/searchPopup').catch(err => {})" />
    </div>
    <!--搜索弹出-->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
    <!--专题列表-->
    <van-list class="special-list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in specialList" :key="item.id">
        <van-image fit="cover" :src="item.scene_pic_url" />
        <div class="tmain">
          <h2 class="tit van-ellipsis">{{item.title}}</h2>
          <p class="summary">{{item.subtitle}}</p>
          <span class="price">{{item.price_info | RMBformat}}</span>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { GetSpecialListData } from '@/request/api'
export default {
  name: 'Special',
  data () {
    return {
      searchVal: '', // 搜索框内容
      specialList: [], // 专题列表
      loading: false, // 是否正在加载中
      finished: false, // 是否加载完成
      isRefreshLoading: false, // 控制下拉刷新的 loading 状态
      count: 10, // 总页数
      currentPage: 1, // 当前页
      pageSize: 10 // 每页个数
    }
  },
  methods: {
    // 发送请求
    getList () {
      GetSpecialListData({
        page: this.currentPage,
        size: this.pageSize
      }).then(res => {
        // 请求成功，打印res
        // console.log(res)
        /**
         * 判断当前展示的所有个数，是否和请求回来的总个数一致，
         * 如果一致，代表在向服务器请求就没有数据了，
         * 所以把finished设置为true，代表所有请求已完成
         */
        if (this.specialList.length === this.count) {
          // 没有数据了，将 finished 设置为true,不再 load 加载更多
          this.finished = true
          this.loading = false
          return
        }
        // 有下一页数据，自增
        this.currentPage++
        this.loading = false
        // 列表赋值
        this.specialList = [...this.specialList, ...res.data.data]
        // this.specialList = res.data.data
        this.count = res.data.count
      })
    },
    // 页面打开执行
    onLoad () {
      // 调用请求
      this.getList()
      this.loading = true
    },
    // 页面下拉刷新
    onRefresh () {
      this.loading = false
      this.finished = false
      this.isRefreshLoading = false
      this.getList()
    }
    // 跳转详情页
    /* toProductsDetail (id) {
      this.$router.push('/specialDetail?id=' + id)
    } */
  }
}
</script>

<style lang="less" scoped>
.special-container{
  padding-top: 54px;
}
.search-box{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}
.slide-enter,.slide-leave-to{
  // 过渡开始之前的样式写在这里
  right: -100%;
}
.slide-enter-active,.slide-leave-active{
  // 过渡属性写在这里
  transition: right .3s;
}
.slide-enter-to,.slide-leave{
  // 过渡结束之后的样式写在这里
  right: 0;
}
.special-list{
  .van-cell{
    padding: 0;
    border-bottom: 10px solid #ebedf0;
  }
  .van-image{
    width: 100%;
    height: 200px;
    display: block;
  }
  .tmain{
    padding: 15px 10px;
  }
  .tit{
    font-size: 16px;
    color: #333;
  }
  .summary{
    font-size: 14px;
    color: #999;
    margin-top: 2px;
  }
  .price{
    font-size: 14px;
    color: #8b0000;
    margin-top: 15px;
    display: block;
  }
}
</style>
